<template>
  请输入书籍关键字：
  <input type="text" v-model="mytext" /><p></p>
  查询结果：
  <ul>
    <li v-for="(item, index) in computedList" :key="index">
      {{item}}
    </li>
  </ul>
</template>

<script>
import { reactive, toRefs, computed, onMounted } from 'vue'

export default {
  setup () {
    const state = reactive({
      mytext: '',
      list: []
    })
    onMounted(() => {
      fetch('/test.json')
        .then(res => res.json())
        .then(res => {
          state.list = res.list
        })
    })
    const computedList = computed(() => {
      const newlist = state.list.filter(item => item.includes(state.mytext))
      return newlist
    })
    return {
      ...toRefs(state),
      computedList
    }
  }
}
</script>